<template>
  <div class="coupon-item">
    <div class="top flex-center">
      <img :src="item.logoUrl" alt="logo" class="logo">
      <div class="text">
        <h3>
          {{ item.voucherType === 0 ? "充电抵用券": (item.voucherType === 1 && "服务费抵用券") }}
          <span class="status orange-bg">
            <span>{{item.statusInfo}}</span>
          </span>
        </h3>
        <p class="canSelect" v-if="item.voucherType===2||item.voucherType===3">
          券码：32089765643521679987761111111116</p>
        <p>
        <p v-if="item.voucherType===0||item.voucherType===1">
          <span style="font-weight: bold">· </span>
          余额支付时抵扣服务费</p>
        <p>
          <span style="font-weight: bold" v-if="item.voucherType===0||item.voucherType===1">· </span>
          {{item.voucherType === 0 ? '抵扣充电费用' : (item.voucherType === 1 && '抵扣服务费')}}</p>
        <p><span style="font-weight: bold">· </span>{{this.range[item.rangeType] || '自营桩群可用'}}</p>
      </div>
      <div class="faceVal">
        <h3 class="price orange font-40"><span>￥</span>{{ item.remainingAmountString }}</h3>
        <p class=" raffle">总额 {{item.amountStr}} 元</p>
        <p class="red raffle">
          <span v-if="item.sourceType===0">后台赠送</span>
          <span v-if="item.sourceType===1">私桩礼包</span>
          <span v-if="item.sourceType===2">微信小程序</span>
          <span v-if="item.sourceType===3">用户中心活动</span>
          <span v-if="item.sourceType===4">兑吧</span>
          <span v-if="item.sourceType===5">红包站返券</span>
          <span v-if="item.sourceType===6">充值返券</span>
          <span v-if="item.sourceType===7">点灯返券</span>
          <span v-if="item.sourceType===8">抽奖奖品</span>
        </p>
      </div>
    </div>
    <div class="bottom">
      <p class="">{{item.effectTimeInfo}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        range: {
          '1': '全网桩群可用',
          '2': '人人电站可用',
          '3': '指定桩群可用'
        }
      };
    },
    props: {
      item: {
        type: Object
      }
    }
  };
</script>

<style rel="stylesheet/stylus" lang="stylus">
  @import '../../../assets/css/mixin.styl';
  .coupon-item
    color: #999999
    background-image url("../../../assets/img/bgcard.png")
    background-size 100% 100%
    padding-bottom: rpx(12);
    background-origin: content-box;
    background-repeat: no-repeat;
    /*background #fff;
    box-shadow 0 3px 14px rgba(0, 0, 0, 0.1);*/
    /* border-radius 5px*/
    .top
      padding rpx(26) rpx(32)
      position relative
      /*&:after
        content ''
        position absolute
        bottom 0
        right 0
        height rpx(36)
        width rpx(36)
        border-radius 100%
        background #f7f7f7*/
      .text
        line-height 1.5
        font-size $fontsize-small
        flex: 1;
        padding: 0 rpx(20);
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        word-wrap: break-word;
        .canSelect
          -webkit-touch-callout:inherit;
          -webkit-user-select:text;
          -khtml-user-select:text;
          -moz-user-select:text;
          -ms-user-select:text;
          user-select:text;
        .status
          font-size $fontsize-small
          color: #ffffff
          display inline-block
          padding rpx(4) rpx(16)
          border-radius 20px
        h3
          font-size $fontsize-large-34
          font-weight bold
          color: #333333
          padding 0 0 rpx(14)
      .logo
        width rpx(114)
      .faceVal
        width rpx(168)
        text-align center
        line-height 1.5
        .price
          font-weight bold
          span
            font-size $fontsize-xm
        .raffle
          font-size $fontsize-small

    .bottom
      padding 0 rpx(32)
      font-size $fontsize-small
      p
        padding: rpx(26) 0 rpx(30);
</style>
